<template>
  <div class="query-container">
    <div class="shawBox">
      <!-- 新增的查询条件 -->
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="系统名称:">
          <el-select v-model="queryForm.moduleName" placeholder="请选择">
            <el-option label="模块A" value="moduleA"></el-option>
            <el-option label="模块B" value="moduleB"></el-option>
            <el-option label="模块C" value="moduleC"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块名称:">
          <el-select v-model="queryForm.status" placeholder="请选择">
            <el-option label="正常" value="enabled"></el-option>
            <el-option label="异常" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="displayTableData"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 300px)"
      >
        <el-table-column label="序号" width="130" align="center">
          <template #default="scope">
            <!-- 计算公式：(当前页-1)*每页条数 + 索引 + 1 -->
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="index" label="系统名称"></el-table-column>
        <el-table-column
          prop="routePointSeq"
          label="模块名称"
        ></el-table-column>
        <el-table-column
          prop="routePointName"
          label="日志描述"
        ></el-table-column>
        <el-table-column
          prop="routePointName"
          label="日志时间(UTC)"
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="150"
        style="margin-top: 30px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

// 查询表单数据
const queryForm = reactive({
  moduleName: "",
  status: "",
  startTime: "",
  endTime: "",
  routePointName: "",
});

// 表格原始数据（所有数据）
const tableData = ref([
  { index: "01", routePointSeq: "1", routePointName: "BUNTA" },
  { index: "02", routePointSeq: "2", routePointName: "P97" },
  { index: "03", routePointSeq: "3", routePointName: "LENKO" },
  { index: "04", routePointSeq: "4", routePointName: "IKELA" },
  { index: "05", routePointSeq: "5", routePointName: "SIKOU" },
  { index: "06", routePointSeq: "6", routePointName: "LENKO" },
  { index: "07", routePointSeq: "7", routePointName: "SIKOU" },
  { index: "08", routePointSeq: "8", routePointName: "P97" },
  { index: "09", routePointSeq: "11", routePointName: "BUNTA" },
  { index: "10", routePointSeq: "12", routePointName: "IKELA" },
  { index: "11", routePointSeq: "6", routePointName: "SIKOU" },
  { index: "12", routePointSeq: "1", routePointName: "BUNTA" },
  { index: "13", routePointSeq: "2", routePointName: "P97" },
  { index: "14", routePointSeq: "3", routePointName: "LENKO" },
  { index: "15", routePointSeq: "4", routePointName: "IKELA" },
  { index: "16", routePointSeq: "5", routePointName: "SIKOU" },
]);

// 【新增】当前页要显示的表格数据
const displayTableData = ref([]);

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);

// 计算“当前页要显示的10条数据”
const calculateDisplayData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  displayTableData.value = tableData.value.slice(start, end);
};

// 初始化时调用，确保第一页显示前10条
calculateDisplayData();

// 处理查询
const handleQuery = () => {
  console.log("查询条件：", queryForm);
  // 若需要“查询后重置分页”，可加这行：currentPage.value = 1; calculateDisplayData();
};

// 处理重置
const handleReset = () => {
  queryForm.moduleName = "";
  queryForm.status = "";
  queryForm.startTime = "";
  queryForm.endTime = "";
  queryForm.routePointName = "";
};

// 处理每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  calculateDisplayData(); // 重新计算当前页数据
};

// 处理当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  calculateDisplayData(); // 重新计算当前页数据
};
</script>

<style scoped lang="scss">
.query-container {
  position: relative;
  text-align: left;
  font-size: 14px;
  color: #222;
  .shawBox {
    min-height: calc(100vh - 132px);
    overflow: hidden;
    fill: #fff;
    border-radius: 12px;
    background-color: #fff;
    filter: drop-shadow(0 0 15px rgba(14, 41, 73, 0.1));
    padding: 15px;
    box-sizing: border-box;
  }
}
:deep(.el-form-item__content) {
  width: 150px;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 22px;
}
:deep(.el-form-item__label) {
  color: #222;
}
.query-form {
  position: relative;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #286bf4;
  cursor: default;
  font-weight: bold;
}

/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: #f6f9ff;
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: #f6f9ff;
  color: #222;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: #f9fbfd !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #222;
}
:deep(.el-table .cell) {
  text-align: left;
}
</style>
